<template>


        <div class="super_container">

                <myheader :total_price='total' :count='count'></myheader>
            
                <!-- Home -->
            
                
            
                <!-- Boxes -->
                <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" title="网站模板">网站模板</a></div>
                <div class="boxes">
                    <div class="section_container">
                        <div class="container">
                            <div class="row">
                                
                                <!-- Box -->
                                <div class="col-lg-4 box_col" v-for="i in cate">
                                    <div class="box">
                                        <div class="box_image"><img src="../assets/images/box_1.jpg" alt=""></div>
                                        <div class="box_title trans_200"><a :href="'/cate?id='+i.id">{{i.cate_name}}</a></div>
                                    </div>
                                </div>
            
                                
            
                            </div>
                        </div>
                    </div>
                </div> 
            
                <!-- Categories -->
            
                <div class="categories">
                    <div class="section_container">
                        <div class="container">
                            <div class="row">
                                <div class="col text-center">
                                    <div class="categories_list_container">
                                        <ul class="categories_list d-flex flex-row align-items-center justify-content-start">
                                            <li><a href="categories.html">new arrivals</a></li>
                                            <li><a href="categories.html">recommended</a></li>
                                            <li><a href="categories.html">best sellers</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
                <!-- Products -->
            
                <div class="products">
                    <div class="section_container">
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <div class="products_container grid">
                                        


                                        <!-- Product -->
                                        <div class="product grid-item hot" v-for="god in good">
                                            <div class="product_inner">
                                                <div class="product_image">
                                                    <a :href="'product?id='+god.id">
                                                        <img :src="base_url+'/static/upload/'+god.img_name" alt="">
                                                    </a>
                                                    <div class="product_tag">hot</div>
                                                </div>
                                                <div class="product_content text-center">
                                                    <div class="product_title"><a :href="'product?id='+god.id">{{god.good_name}}</a></div>
                                                    <div class="product_price">${{god.good_price}}</div>
                                                    <div class="product_button ml-auto mr-auto trans_200"><a href="" @click="add_cart(god)" >add to cart</a></div>
                                                </div>
                                            </div>	
                                            
                                        </div>
                                        

            
                    
            
                                    </div>
                                    
                                </div>
                                
                            </div>
                            <center><page v-if="changestatus" :dataAll="all" :dataCur="cur" :datanum="num" :dataDatanum="dataNum" @change="pageChange"></page></center>
                            
                        </div>
                    </div>
                </div>
            
                <!-- Footer -->
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
        import myfooter from './footer.vue'
        import Cookies from 'js-cookie'
        import page from './page.vue'
      
      export default {
        data () {
          return {
            good:'',
            cate:'',
            msg: "",
            datalist:[],
            clicked:0,
            upath: '',
            result: '',
            total:0,
            count:0,
            uping:0,
            result: '',
            uping:0,
            all: 0, //总页数
            cur: 1, //当前页码
            num: 8, //一页显示的数量 必须是奇数
            dataNum: 0, //数据的数量
            changestatus:false

          }
        },
        components: {
        'myheader':myheader,
        'myfooter':myfooter,
        'page':page,
        },
        mounted:function(){

            this.common.get_menu();
            this.data();
            var data = Cookies.get('cart');
			if(data){
				data = JSON.parse(data)
				this.datalist = data;
            };
            this.total_price();
            this.post_redis();
            
            
        },
        methods:{
            changetest(index){
                this.clicked = index;
            },

            data:function() {
             //设置请求路径
             var url  = this.base_url+"/Index_cate";                
             // 发送请求:将数据返回到一个回到函数中
             var _this= this;
             // 并且响应成功以后会执行then方法中的回调函数
                this.axios.post(url,this.qs.stringify({'cur':this.cur,'num':this.num}))
                .then(function(result) {

                    console.log(result);
                    _this.cate=result.data.cate;
                    _this.good=result.data.good;
                    _this.dataNum = result.data.count
                   _this.all=Math.ceil(_this.dataNum/_this.num)
                    _this.changestatus=true;
                
    
                    });    
                },
                pageChange: function(page) {

                this.cur = page
                console.log(this.cur)

                this.data()

                

            },



           add_cart:function(good){
            let cartlist = this.datalist;
            let findgood = 0;
            for(let i=0,l=cartlist.length;i<l;i++){
                    if(good.good_name == cartlist[i]['name']){
                        cartlist[i]['num']++;
                        findgood = 1;
                        break;
                    }
            }
            if(findgood==0){
                cartlist.push({'id':good.id,'name':good.good_name,'price':good.good_price,'img':good.img_name,'num':1});
            }
			this.datalist = cartlist;
            Cookies.set('cart',this.datalist,{ expires: 7 })
            this.total_price();
            this.post_redis();
            alert('添加购物车成功')

        },

        post_redis:function(){
				var add_cart_redis = this.base_url+"/Addcart_redis"
				var _this = this
				var params = {
					'cartlist':JSON.stringify(this.datalist)
				}
				this.axios.post(add_cart_redis,this.qs.stringify(params)).then(function(result) {
				if(result.data['code'] == '200') {
					console.log(result.data.message)
				}
				else {
					_this.msg = result.data.message
					console.log(result.data)
				}

				}); 
            },
            total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
				this.total = this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				}
			},


        }
      }
      
      
      </script>
       
      <style>
      
      
      
      </style>